<template>
	<!-- 外层容器，模拟页面的浅灰色背景 -->
	<view class="page-wrapper">
		<!-- 主体内容卡片 -->
		<view class="bio-card">
			<!-- 标题 -->
			<view class="bio-title">生平简介</view>

			<!-- 图片和详细信息容器 (使用flex布局) -->
			<view class="bio-content">
				<!-- 图片 -->
				<!-- 替换 src 为你的图片路径 -->
				<image class="bio-image" mode="aspectFill" src="/static/flowers.jpg"></image>

				<!-- 详细信息 -->
				<view class="bio-details">
					<view class="detail-item">
						<text class="detail-label">姓名：</text>
						<text class="detail-value">赵淑珍</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">出生：</text>
						<text class="detail-value">1937-09-12</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">逝世：</text>
						<text class="detail-value">2018-11-23</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">祖籍：</text>
						<text class="detail-value">河北</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">宗教：</text>
						<text class="detail-value">无</text>
					</view>
					<view class="detail-item">
						<text class="detail-label">职业：</text>
						<text class="detail-value">无</text>
					</view>
				</view>
			</view>

			<!-- 段落文本 -->
			<view class="bio-paragraph">
				奶奶是一个农民，一辈子简简单单，人善良，心好。
			</view>
		</view>
	</view>
</template>

<script setup>
	// 使用 <script setup> 不需要额外导出组件
	// 如果有需要的数据或方法，可以在这里定义
</script>

<style lang="scss">
	// 外层容器样式
	.page-wrapper {
		background-color: #f0f0f0; // 浅灰色背景
		padding: 30upx 0; // 页面顶部和底部留白
		min-height: 100vh; // 确保有足够的背景高度
	}

	// 主体内容卡片样式
	.bio-card {
		background-color: #ffffff; // 白色背景
		margin: 0 30upx; // 左右居中并留边距
		padding: 30upx; // 内边距
		border-radius: 10upx; // 圆角
		box-shadow: 0 2upx 8upx rgba(0, 0, 0, 0.05); // 细微阴影
	}

	// 标题样式
	.bio-title {
		font-size: 36upx;
		font-weight: bold;
		margin-bottom: 30upx;
		color: #333; // 深灰色文字
	}

	// 图片和详细信息容器样式 (flex)
	.bio-content {
		display: flex;
		margin-bottom: 30upx;
		align-items: flex-start; // 图片和文字顶部对齐
	}

	// 图片样式
	.bio-image {
		width: 180upx; // 图片宽度
		height: 220upx; // 图片高度
		margin-right: 30upx; // 图片右侧边距
		filter: grayscale(100%); // 将图片变为黑白
	}

	// 详细信息容器样式 (flex item)
	.bio-details {
		flex: 1; // 占据剩余空间
		font-size: 28upx; // 文字大小
		color: #555; // 灰色文字
	}

	// 详细信息项 (每行) 样式
	.detail-item {
		margin-bottom: 10upx; // 行间距

		&:last-child {
			margin-bottom: 0; // 最后一项没有下边距
		}
	}

	// 详细信息标签 (姓名：等) 样式
	.detail-label {
		// 可以根据需要调整样式，例如设置固定宽度
		// min-width: 120upx; // 示例：如果需要对齐可以设置最小宽度
		// display: inline-block; // 示例：如果设置 min-width 需要 display
	}

	// 详细信息值 (赵淑珍等) 样式
	.detail-value {
		//
	}

	// 段落文本样式
	.bio-paragraph {
		font-size: 28upx; // 文字大小
		line-height: 1.6; // 行高
		color: #555; // 灰色文字
	}
</style>